<template>
	<view class="app">
		<view class="search">
			<view class="field">
				<view class="label">姓名</view>
				<input v-model="name" type="text" placeholder="请输入姓名">
			</view>
			<view class="field">
				<view class="label">身份证号</view>
				<input v-model="identityCard" type="text" placeholder="请输入身份证号">
			</view>
			<view class="field">
				<view class="label">密码</view>
				<input v-model="password" type="text" placeholder="请输入密码">
			</view>
			<view class="field">
				<view class="label">确认密码</view>
				<input v-model="confirmPassword" type="text" placeholder="请再次输入密码">
			</view>
			<view class="field">
				<view class="label">手机号</view>
				<input v-model="phone" type="text" placeholder="请输入手机号" :disabled="isPhoneDisabled">
			</view>
			<view class="field">
				<view class="label">验证码</view>
				<input v-model="verificationCode" type="text" placeholder="请输入验证码">
				<u-button class="send-btn" size="mini" :disabled="countingDown" @click="startCountdown">
					{{ countingDown ?  countdown + "s后重发" : '发送验证码' }}
				</u-button>
			</view>
		</view>
		<u-button class="custom-style" type="primary" @click="IdRegister">下一步</u-button>
	</view>
</template>
<script>
	import {
		register,sendauthCode
	} from "../../API/loginAndRegister.js"
	export default {
		data() {
			return {
				// 姓名
				name: '',
				//身份证
				identityCard: '',
				//密码
				password: '',
				//确认密码
				confirmPassword: '',
				//手机号
				// phone: '',
				//验证码
				verificationCode: '',
				countingDown: false,
				//倒计时
				countdown: 60,
				timer: null,

				//禁用
				isPhoneDisabled: true
			};
		},
		onShow() {
			this.phone = localStorage.getItem('phone');
			this.isPhoneDisabled = this.phone ? true : false;
			// console.log(7891);
		},
		methods: {
			startCountdown() {
				if (!this.countingDown) {
					this.countingDown = true;
					sendauthCode({phone:this.phone}) // 调用发送验证码的请求函数
						.then(() => {
							this.timer = setInterval(() => {
								this.countdown -= 1;
								if (this.countdown <= 0) {
									clearInterval(this.timer);
									this.timer = null;
									this.countdown = 60;
									this.countingDown = false;
								}
							}, 1000);
						})
						.catch((error) => {
							console.error("Error sending verification code:", error);
							this.countingDown = false;
						});
				}
			},
			IdRegister() {
				console.log(111);
			  // 首先进行数据合法性检查
			  if (
			    !this.name ||
			    !this.identityCard ||
			    !this.password ||
			    !this.confirmPassword ||
			    !this.phone ||
			    !this.verificationCode
			  ) {
			    console.log("请填写完整信息");
			    return;
			  }
			
			  // 检查密码一致性
			  if (this.password !== this.confirmPassword) {
			    this.passwordMismatch = true;
			    return;
			  } else {
			    this.passwordMismatch = false;
			  }
			
			  // 向后端发送请求，只需要发送一个密码即可
			  register({
			    phone: this.phone,
			    name: this.name,
			    identityCard: this.identityCard,
			    password: this.password, // 只发送一个密码
			    verificationCode: this.verificationCode,
			  })
			    .then((res) => {
			      console.log("注册成功");
			    })
			    .catch((error) => {
			      // 在这里处理错误
			      console.error("Error:", error);
			    });
			}

		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	};
</script>
<style scoped>
	.app {
		width: 100%;
		height: 100%;
		/* background-color: lightgray; */
	}

	.search {
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		border-bottom: 1rpx solid lightgray;
		margin-top: 30rpx;
	}

	.field {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding: 0 20px;
		margin-top: 20rpx;
		/* 调整水平内边距 */
		border-bottom: 1rpx solid lightgray;
	}

	.label {
		width: 80px;
		/* 调整宽度以适合您的需求 */
		text-align: center;
		/* 居中文本内容 */
		margin-right: 10px;
	}

	.input {
		flex: 1;
		height: 60rpx;
		margin: 0 10px;
		/* 调整水平外边距 */
		text-align: center;
		/* 居中 placeholder */
	}

	.send-btn {
		border: none;
	}

	.custom-style {
		margin: 100rpx 20rpx 0;
		background-color: #ffa500ad;
		font-weight: 600;
	}
</style>